<template>
  <el-main style="width: 100%; height: 100%">
    <el-table
      v-show="flag"
      v-loading="loading"
      :data="tableData1_0"
      ref="tableData1_0"
      :span-method="arraySpanMethod"
      style="width: 100%; height: 100%"
      border
    >
      <el-table-column
        prop="province"
        label="省"
        width="150"
        header-align="center"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="city"
        label="市"
        width="150"
        header-align="center"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="county"
        width="150"
        label="区"
        header-align="center"
        align="center"
      >
      </el-table-column>
      <el-table-column
        label="领图单位"
        prop="receiveUnitName"
        header-align="center"
        align="center"
        width="350"
      >
      </el-table-column>
      <el-table-column
        label="所属行业"
        width="200"
        prop="industry"
        header-align="center"
        align="center"
      >
      </el-table-column>
      <el-table-column
        label="领图次数"
        width="100"
        prop="receiveTimes"
        header-align="center"
        align="center"
      >
      </el-table-column>
      <el-table-column label="领图数量" header-align="center" align="center">
        <el-table-column
          label="4D数据（幅）"
          width="120"
          prop="receiveNum_4D"
          header-align="center"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="地形图（张）"
          prop="receiveNum_TopographicMap"
          width="120"
          header-align="center"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="控制点（点）"
          prop="receiveNum_Point"
          width="120"
          header-align="center"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="地理国情数据（MB）"
          prop="receiveNum_DLGQ"
          width="120"
          header-align="center"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="航摄影像（片）"
          prop="receiveNum_AerialImages"
          width="120"
          header-align="center"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="卫星遥感影像（景）"
          prop="receiveNum_SatelliteImages"
          width="120"
          header-align="center"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="加密成果（个）"
          prop="receiveNum_JM"
          width="120"
          header-align="center"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="其他（幅\个）"
          prop="receiveNum_QTs"
          width="120"
          header-align="center"
          align="center"
        >
        </el-table-column>
      </el-table-column>
    </el-table>
    <div
      v-show="!flag"
      id="main"
      style="width: 100%; height: 600px"
      class="chartcontent"
    ></div>
  </el-main>
</template>

<script>
import { receiveUnitReport } from "@/api/report/basic";
var myChart;

export default {
  name: "table0_0",
  data() {
    return {
      flag: true,
      spanArr: [],
      spanArr1: [],
      provinceArr: [],
      provincePos: 0,
      loading: false,
      cityArr: [],
      cityPos: [],
      countyArr: [],
      countyPos: [],
      tableData1_0: [],
      tableChart: [],
      queryParams: {},
      option: {
        title: {
          text: "领用单位",
        },
        tooltip: {},
        legend: {
          data: ["领图次数"],
        },
        xAxis: {
          data: [],
          axisLabel: {
            interval: 0,
            rotate: 20,
          },
        },
        yAxis: {},
        series: [
          {
            name: "领图次数",
            type: "bar",
            data: [],
            animationDelay: function (idx) {
              return idx * 10 + 1000;
            },
            barWidth: 60,
            itemStyle: {
              normal: {
                // 随机显示
                //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}

                // 定制显示（按顺序）
                color: function (params) {
                  var colorList = [
                    "#C1232B",
                    "#B5C334",
                    "#FCCE10",
                    "#E87C25",
                    "#27727B",

                    "#FE8463",
                    "#9BCA63",
                    "#FAD860",
                    "#F3A43B",
                    "#60C0DD",

                    "#D7504B",
                    "#C6E579",
                    "#F4E001",
                    "#F0805A",
                    "#26C0C0",
                  ];
                  return colorList[params.dataIndex];
                },
                label: {
									show: true, //开启显示
									position: 'top', //在上方显示
									textStyle: { //数值样式
										color: 'black',
										fontSize: 16
									}
								},
              },
            },
          },
        ],
        grid: {
          left: "8%",
          right: "0",
          bottom: "10%",
          containLabel: true,
        },
      },
    };
  },
  mounted: function () {
    // 组件创建完后获取数据，
    // 此时 data 已经被 observed 了
    // this.getReportData();
    this.$emit("reportSearch", "");
  },
  methods: {
    merage(data) {
      //要合并的数组的方法
      this.merageInit();
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          //第一行必须存在
          this.provinceArr.push(1);
          this.provincePos = 0;

          this.cityArr.push(1);
          this.cityPos = 0;
          this.countyArr.push(1);
          this.countyPos = 0;
        } else {
          // 判断当前元素与上一个元素是否相同 this.provincePos是provinceArr内容的序号

          //省
          if (data[i].province === data[i - 1].province) {
            this.provinceArr[this.provincePos] += 1;
            this.provinceArr.push(0);
          } else {
            this.provinceArr.push(1);
            this.provincePos = i;
          }
          console.log("this.provincePos " + this.provincePos);
          //市
          if (
            data[i].city === data[i - 1].city &&
            data[i].province === data[i - 1].province
          ) {
            this.cityArr[this.cityPos] += 1;
            this.cityArr.push(0);
          } else {
            this.cityArr.push(1);
            this.cityPos = i;
          }

          //区
          if (
            data[i].county === data[i - 1].county &&
            data[i].city === data[i - 1].city &&
            data[i].province === data[i - 1].province
          ) {
            this.countyArr[this.countyPos] += 1;
            this.countyArr.push(0);
          } else {
            this.countyArr.push(1);
            this.countyPos = i;
          }
        }
      }
      console.log("this.provinceArr:" + this.provinceArr);
    },
    getReportData(queryParam) {
      this.loading = true;
      var condition = {};
      if (queryParam) {
        condition.beginTime = queryParam.beginTime;
        condition.endTime = queryParam.endTime;
        condition.order = "t4.countyCode";
        receiveUnitReport(condition).then((response) => {
          this.tableData1_0 = response.rows;
          this.total = response.total;
          this.merage(this.tableData1_0);
          this.myEcharts();
          this.loading = false;
        });
      } else {
        this.tableData1_0 = [];
        this.loading = false;
      }
    },
    merageInit() {
      //初始化省市区的合并行的数组
      this.provinceArr = [];
      this.provincePos = 0;
      this.cityArr = [];
      this.cityPos = 0;
      this.countyArr = [];
      this.countyPos = 0;
    },

    arraySpanMethod({ rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        //第一列的合并方法,省
        const _row_1 = this.provinceArr[rowIndex];
        const _col_1 = _row_1 > 0 ? 1 : 0; //如果被合并了_row=0则它这个列需要取消
        return {
          rowspan: _row_1,
          colspan: _col_1,
        };
      } else if (columnIndex === 1) {
        //第二列的合并方法,市
        const _row_2 = this.cityArr[rowIndex];
        const _col_2 = _row_2 > 0 ? 1 : 0;
        return {
          rowspan: _row_2,
          colspan: _col_2,
        };
      } else if (columnIndex === 2) {
        //第三列的合并方法,区
        const _row_3 = this.countyArr[rowIndex];
        const _col_3 = _row_3 > 0 ? 1 : 0;
        return {
          rowspan: _row_3,
          colspan: _col_3,
        };
      }
    },
    export2Excel(name) {
      const tHeader1 = [
        "",
        "",
        "",
        "",
        "",
        "",
        "4D数据（幅）",
        "地形图（张）",
        "控制点（点）",
        "地理国情（MB）",
        "航摄影像（片）",
        "卫星遥感影像（景）",
        "加密成果（个）",
        "其他（幅个）",
      ];
      //const tHeader = name
      var filterVal = [];
      for (var i in this.tableData1_0[0]) {
        if (
          i != "provinceCode" &&
          i != "cityCode" &&
          i != "countyCode" &&
          i != "receiveUnitID" &&
          i != "industryNo"
        ) {
          filterVal.push(i);
        }
      }
      console.log(filterVal);
      // common.export2Excel(name,tHeader,filterVal,this.tableData0_0)
      require.ensure([], () => {
        const {
          export_json_to_excel,
        } = require("@/views/basic-report/common/Export1_0");
        //const tHeader = theader;
        let tHeader = [
          name,
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
        ];
        const list = this.tableData1_0;
        const data = this.formatJson(filterVal, list);
        data.unshift(tHeader1);
        data.unshift([
          "省",
          "市",
          "县",
          "领图单位",
          "所属行业",
          "领图次数",
          "领图数量",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
        ]);
        data.unshift([
          "填报单位：",
          "甘肃省基础地理信息中心",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "时期:",
          "",
        ]);
        console.log(data);
        var sheng = data[4][0];
        var shi = data[4][1];
        var qu = data[4][2];
        var merges_arr = [];
        var start_sheng = 4;
        var end_sheng = 4;
        var start_shi = 4;
        var end_shi = 4;
        var start_qu = 4;
        var end_qu = 4;
        for (var i = 4; i < data.length; i++) {
          if (sheng != data[i][0]) {
            sheng = data[i][0];
            if (start_sheng != end_sheng) {
              merges_arr.push({
                s: {
                  c: 0,
                  r: start_sheng,
                },
                e: {
                  c: 0,
                  r: end_sheng,
                },
              });
              start_sheng = i;
              end_sheng = i;
            }
          } else {
            end_sheng = i;
            if (i == data.length - 1) {
              merges_arr.push({
                s: {
                  c: 0,
                  r: start_sheng,
                },
                e: {
                  c: 0,
                  r: end_sheng,
                },
              });
            }
          }
        }
        console.log(merges_arr);
        export_json_to_excel(tHeader, data, name, merges_arr);
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },

    myEcharts() {
      this.refreshchart();
    },
    showchart(selectValue, queryParams) {
      this.flag = !this.flag;
      if (!this.flag) {
        this.refreshchart(queryParams);
      }
    },
    refreshchart(queryParams) {
      // 基于准备好的dom，初始化echarts实例
      myChart = this.$echarts.init(document.getElementById("main"));
      if (queryParams) {
        this.queryParams = queryParams;
      }
      var valueType = this.queryParams.chartValueType;
      var valueTypeName = this.queryParams.chartValueTypeName;
      if (valueType) {
        console.log(valueType);
        var condition = {};
        condition.beginTime = this.queryParams.beginTime;
        condition.endTime = this.queryParams.endTime;
        condition.order = valueType + " desc";
        condition.topNum = this.queryParams.topNum;
        receiveUnitReport(condition).then((response) => {
          this.tableChart = response.rows;

          this.option.xAxis.data = [];
          this.option.series[0].data = [];
          this.option.legend.data[0] = valueTypeName;
          this.option.series[0].name = valueTypeName;
          for (
            var i = 0;
            i < this.tableChart.length &&
            this.option.series[0].data.length <= 20;
            i++
          ) {
            this.option.xAxis.data.push(this.tableChart[i].receiveUnitName);
            this.option.series[0].data.push(this.tableChart[i][valueType]);
          }
          myChart.setOption(this.option);
          setTimeout(function () {
            myChart.resize();
          }, 100);
          // 使用刚指定的配置项和数据显示图表。
        });
      }
    },
  },
};
</script>
